<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑Sql查询代码</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form label-width="auto">
                        <el-form-item label='数据源'>
                            <el-cascader style='width: 100%;' :change-on-select='true' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                v-model='ruleDef.dataSource' placeholder="关键字搜索" :options="dataSourceList" filterable
                                clearable>
                            </el-cascader>
                        </el-form-item>
                        <el-tabs v-model='currentTab' @tab-remove="handleTabRemove" :before-leave='tabBeforeLeave'>
                            <el-tab-pane label='查询前处理' name='beforeQuery'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.beforeQuery"></hc-groovy-editor>
                            </el-tab-pane>
                            <el-tab-pane label='查询后处理' name='afterQuery'>
                                <hc-groovy-editor :panel='{vari:true,func:true,snip:true}' v-model="ruleDef.afterQuery"></hc-groovy-editor>
                            </el-tab-pane>
                            <el-tab-pane v-for="sql in ruleDef.list" :key='sql.id' :label="sql.code" :name='sql.code'
                                closable>
                                <hc-lang-editor :panel='{var:true,func:true,snip:true}' lang='sql' v-model="sql.content"></hc-lang-editor>
                            </el-tab-pane>
                            <el-tab-pane key="#add" name="#add">
                                <template slot="label">
                                    <el-input ref="saveTagInput" class="input-new-tag" v-model="newSqlTag" size='mini'
                                        @keyup.enter.native="handleArgInputConfirm()" @blur="handleArgInputConfirm()"
                                        placeholder="+ 新SQL" style='width:100px'></el-input>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                        
                        <el-form-item label="">
                            <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                            &nbsp;&nbsp;
                            <el-button type="danger" @click='handleDeleteRuleEvent'>删除规则</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>

        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css"/>
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            let rpath = $util.getUrlArgOrDefault('rpath', 'xsxdjc/UserInfo')
            // var vm

            $rest.check$pinfoOrLoad(
                function() {
                    $rest.obtainRuleDefByRpath(rpath, initvm);
                }, 'xsxdjc/Main');


            function initvm(ruleDef) {
                let setting = $pinfo.ruleList.find(it => it.rtype === 'data:setting');
                let settingList = $util.$tree.clone(setting ? setting.list : []);
                settingList = $util.$tree.filter(settingList, (it) => {
                    return it.type == 'object'
                });

                $util.$tree.traverse(settingList, (it) => {
                    it.label = it.name ? (it.code + ':' + it.name) : it.code;
                    if (it.list && it.list.length == 0) it.list = null;
                });
                let currentTab = ruleDef.list.length > 0 ? ruleDef.list[0].code:'beforeQuery';
                
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        currentTab: currentTab,
                        oldTab: '',
                        newSqlTag: '',
                        dataSource: {},
                        dataSourceList: settingList,
                        ruleDef: ruleDef
                    },
                    methods: {
                        handleArgInputConfirm() {
                            let tag = this.newSqlTag;
                            if (tag) {
                                this.ruleDef.list.push({
                                    id: ++this.ruleDef.rmaxid,
                                    code: tag,
                                    name: tag,
                                    content: ''
                                });
                            }
                            this.newSqlTag = '';
                            this.currentTab = tag
                        },
                        handleTabRemove(val) {
                            let index = this.ruleDef.list.findIndex(it => it.code == val);
                            this.ruleDef.list.splice(index, 1);
                        },
                        handleUpdateRuleEvent() {
                            $rest.updateRuleDefInVm(this)
                        },
                        handleDeleteRuleEvent() {
                            $rest.deleteRuleDefInVm(this)
                        },
                        tabBeforeLeave(currentName, oldName) {
                            // console.warn(currentName, '##', oldName, '###', this.currentTab)
                            if (oldName && oldName !== '#add') this.oldTab = oldName;
                            if (currentName == "#add") {
                                return false
                            } else if (!currentName && this.oldTab)
                                this.$nextTick(function() {
                                    this.currentTab = this.oldTab;
                                });
                        },
                    }, //end of methods of VUE
                });

            }
        </script>

    </body>

</html>
